<template>
  <div>
    <!-- 商品详情页面点击规格进入尺寸数量选择加入购物车 -->
    <div class="option-box">
      <selection @m_close="closeBox" @getColor="getColor" @getSize="getSize" :targetId="p_gid"></selection>
      <div class="number">
        <span>购买数量</span>
        <!-- <el-input-number
          v-model="value"
          @change="getSelectNum"
          :min="1"
          :max="p_stock"
          :label="p_gid"
          size="mini"
          ref="input"
        ></el-input-number> -->
        <!-- mui放在子组件，加减有效，但无法将变化的值传回父组件，直接在页面引用，js无效(加减)？？？===== -->
        <numberBox @getSelectNum="getSelectNum" :m_stock="p_stock"></numberBox>
      </div>

      <div class="my-button">
        <el-button type="warning" @click="addToCart">确定</el-button>
        <!-- <button type="button" class="mui-btn mui-btn-warning" @click="addToCart">确定</button> -->
      </div>
    </div>
  </div>
</template>

<script>
import mui from "../../lib/mui/js/mui.min.js";
import selectionBox from "./selectBox.vue";
import { Toast } from "mint-ui";
import numberBox from "./goodsSelectNumber.vue";

export default {
  data() {
    return {
      goodsObj: {},
      selectedNum:1,
      p_goodsId: "",
      value: 1
    };
  },
  props: ["p_stock", "p_gid"],
  mouted() {
    mui.init();
    mui(".mui-numbox").numbox();
  },
  methods: {
    close() {
      this.$emit("p_close");
    },
    closeBox() {
      this.$emit("p_close");
    },
    getColor(obj) {
      // 响应式设置
      this.goodsObj = Object.assign(this.goodsObj,obj)
    },
    getSize(obj) {
      this.goodsObj = Object.assign(this.goodsObj,obj)
    },

    getSelectNum(value) {
      // 进来数字框默认为1，且不点加减按钮或者不输入数量，子组件getValue()此方法不会调用，取不到值，也不会触发父组件的方法
      // 在子组件获取到值，传给父组件后将其保存
      this.$set(this.goodsObj,"selectedNum",parseInt(value))
    },
    addToCart() {
      if (!this.goodsObj.selectedNum) {
        // 判断是否调用过数字框，没有的话默认为1
        // 响应式设置
        this.$set(this.goodsObj,"selectedNum",this.selectedNum)
        return;
      }
      var goodsId = this.goodsObj.sid ?
        this.goodsObj.gid + this.goodsObj.cid + this.goodsObj.sid : this.goodsObj.gid + this.goodsObj.cid;
      this.$set(this.goodsObj,"goodsId",goodsId)
      this.$set(this.goodsObj,"checked",true)
      if(!this.goodsObj.goodsId) return
      this.$store.commit("addToCartList", this.goodsObj);
      // console.log(this.goodsObj);
      this.close();
    }
  },
  components: {
    selection: selectionBox,
    numberBox,
  }
};
</script>

<style lang="scss" scoped>
$baseColor: #26a2ff;
.option-box {
  background: #fff;
  border-radius: 10px 10px 0 0;
  position: fixed;
  bottom: 50px;
  left: 0;
  z-index: 998;
  width: 100%;
  .number {
    display: flex;
    padding: 0 20px;
    justify-content: space-between;
    vertical-align: middle;
    margin-bottom: 20px;
    .mui-numbox {
      border: none;
      background: #eee;
      height: 20px;
      .mui-input-numbox {
        background: #eee;
        border: none !important;
        font-size: 12px;
      }
    }
  }
  .my-button {
    width: 100%;
    display: flex;
    position: static;
    height: 50px;
    line-height: 50px;
    z-index: 666;
    font-size: 18px;
    .el-button {
      flex: 1;
    }
  }
}
</style>
